<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'adminproduct.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
	<script src="lib/layui/layui.js" type="text/javascript"  charset="utf-8"></script>
  </head>
  <script type="text/html" id="barProduct">
 <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="imgs">图片维护</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.pid}}" title="轮播" lay-filter="lockDemo" {{ d.iswheel == "true" ? 'checked' : '' }}>
</script>

 <script type="text/html" id="toolbarPro">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="addpro">添加商品</button>
    <button class="layui-btn layui-btn-sm" lay-event="dels">批量删除</button>
  </div>
</script>
   <script>
layui.use(['table','jquery','form','upload'], function(){
  var table = layui.table;
  var form=layui.form;
    var $=layui.jquery;
    var upload=layui.upload;
    //多图片上传
     upload.render({
	    elem: '#uploadimgs'
	    ,url: 'UploadServlet' //改成您自己的上传接口
	    ,multiple: true
	    ,done: function(res){
	     $('#divimgs').append('<img style="width:60px;height:60px;" src="'+ res.src+'">');
	     $('#imgssrc').append(res.src+",");
	      //上传完毕
	    }
	  });
    //按钮
    //监听锁定操作
			  form.on('checkbox(lockDemo)', function(obj){
			   if(obj.elem.checked==true){
			   	$.post("AdminProductServlet",{
			   			pid:obj.value,
			   			iswheel:'true',
			   			order:10
			   	},function(res){
			   		if(res.result.success){
		    			layer.msg(res.result.message);
				    }else{
				    	layer.msg(res.result.message);
				    }
			   	},'json');
			   }else{
			   	$.post("AdminProductServlet",{
			   			pid:obj.value,
			   			iswheel:'false',
			   			order:10
			   	},function(res){
			   		if(res.result.success){
		    			layer.msg(res.result.message);
				    }else{
				    	layer.msg(res.result.message);
				    }
			   	},'json');
			   }
			  });
    
    
    
    var uploadInst = upload.render({
		    elem: '#prosimg'
		    ,url: 'UploadServlet' //改成您自己的上传接口
		    ,done: function(res){
		        $('#simg').attr("src", res.src);
				$('#inputsimg').val(res.src);
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		     
		    }
		  });
    //头工具栏事件
   $.post('AdminProductServlet',{
   order:2
   },function(res){
   var selptid=document.getElementById("updateptid");
   for(var i=0;i<res.length;i++){
   var op=document.createElement("option");
   op.text=res[i].pcname;
   op.value=res[i].pcid;
   selptid.add(op);
   }
  form.render();
   },'json');
   $.post('AdminProductServlet',{
   order:2
   },function(res){
   var selptid=document.getElementById("ptid");
   for(var i=0;i<res.length;i++){
   var op=document.createElement("option");
   op.text=res[i].pcname;
   op.value=res[i].pcid;
   selptid.add(op);
   }
  form.render();
   },'json');
  table.on('toolbar(producttable)', function(obj){
   var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'addpro':
        layer.open({
			  type: 1, 
			  content: $("#addproform")
			  ,area: ['700px', '400px'] 
			})
      break;
      case 'dels':
         var data = checkStatus.data;
	      var arrpids=new Array(data.length);
		for(var i=0; i<data.length;i++){
			arrpids[i]=data[i].pid;

		}
   		
      layer.confirm('真的删除这些行么', function(index) {
      $.post('AdminProductServlet',{
 				arrpids:arrpids,
				order:6
 			},function(res){
 				if(res.result.success){
 				layer.close(index);
 					layer.msg(res.result.message);
 					table.reload("productReload");
 				}else{
 					layer.msg(res.result.message);
 				}
 			},"json");
 			});
      break;
           
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });
  	//表单监听提交	
		form.on('submit(addprodoct)', function(data){
			//表单序列化，快速获取表单中所有name属性
			var str=$("#addproform").serialize()+"&order=3";
		  $.post('AdminProductServlet',str,function(res){
		  	if(res.result.success){
		  		layer.closeAll();//关闭所有弹窗
		  		layer.msg(res.result.message);
		  		table.reload("productReload");
		  		$("#addproform")[0].reset();
		  		from.render();
		  	}else{
		  		layer.msg(res.result.message);
		  	}
		  },"json")
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		 });
			
  //方法级渲染
  table.render({
    elem: '#producttable'
    ,url: 'AdminProductServlet'
    ,toolbar: '#toolbarPro' //开启头部工具栏，并为其绑定左侧模板
    ,cols: [[
      {checkbox: true, fixed: true}
     // ,{field:'pid', title: '商品编号', sort: true, fixed: true}
     
      ,{field:'pname', title: '商品名称'}
      ,{field:'pmaterial', title: '处理器名称'}
      ,{field:'pmprice', title: '商品价格'}
      ,{field:'time', title: '发布时间',width: 120}
      ,{field:'pcolor', title: '颜色'}
      ,{field:'pelement', title: '产品详情'}
      ,{field:'psimg', title: '小图',templet:function(d){
      return '<div><img style="width: 50px;height: 59px;" src='+d.psimg+' /></div>';
      }}
      ,{field:'iswheel', title: '是否轮播', sort: true,templet: '#checkboxTpl'}
      ,{field:'ptname', title: '类型名称'}
      ,{fixed: 'right', title:'操作', toolbar: '#barProduct',width: 200}
    ]]
    ,id: 'productReload'
    ,page: true
    ,height: 550
    ,where:{
    	order:1
    }
  });
  
  table.on('tool(producttable)', function(obj) {
  	var data = obj.data;
  	//console.log(obj)
  	if(obj.event === 'del') {
  		layer.confirm('真的删除行么', function(index) {
 			$.post('AdminProductServlet',{
 				pid:data.pid
				,order:5
 			},function(res){
 				if(res.result.success){
 				layer.close(index);
 					layer.msg(res.result.message);
 					table.reload("productReload");
 				}else{
 					layer.msg(res.result.message);
 				}
 			},"json");
  		});
  		} else if(obj.event === 'edit') {
  		 layer.open({
			type:1, 
			content:$("#updateproform")
			,area: ['700px', '400px']
			, 
			title:"您正在修改产品的是 ["+data.pname+"]的信息"
			});
			 //给表单赋值
				form.val("updateproform", {
				  "pname":data.pname
				 ,"pmaterial":data.pmaterial
				 ,"pmprice":data.pmprice
				 ,"pmodel":data.pmodel
				 ,"pcolor":data.pcolor
				 ,"pelement":data.pelement
				 ,"ptid":data.ptid
				 ,"pid":data.pid
				});
			//表单监听提交
			form.on('submit(updateprodoct)', function(data){
			//表单序列化，快速获取表单中所有name属性
			var str=$("#updateproform").serialize()+"&order=4";
		  $.post('AdminProductServlet',str,function(res){
		  	if(res.result.success){
		  		layer.closeAll();//关闭所有弹窗
		  		layer.msg(res.result.message);
		  		table.reload("productReload");
		  		$("#updateproform")[0].reset();//清空表单
		  		form.render();
		  	}else{
		  		layer.msg(res.result.message);
		  	}
		  },"json");
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		 });
    }else if(obj.event === 'imgs'){
    		 layer.open({
		     		type:1,
		     		content:$("#imgsform"),
		     			 area: ['600px', '400px'] , 
		     			 
		     		title:"您正在维护商品【"+data.pname+"】的图片",
		     		offset:'40px'
		     	});
				   form.val("imgsform", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
				  "pids": data.pid	
				});
    		
			    		table.render({
			    elem: '#imgstable'
			    ,url: 'AdminProductServlet'
			    ,cols: [[
			     {checkbox: true, fixed: true}
			       ,{field:'piid', title: '图片编号', width:80}
				      ,{field:'pid', title: '商品编号', width:160}
				      ,{field:'picturesrc', title: '商品图片', width:160, sort: true,templet:function(d){
				      	return '<div><img style="width:10px,height:10px" src='+d.picturesrc+' /></div>';
			      }}
			     
			    ]]
			    ,id: 'imgsReload'
			    
			    ,where:{
			    	order:11,
			    	pid:data.pid
			    }
			  });
    		  //图片维护，提交表单
 			 form.on('submit(imgsform)', function(data){
					$.post('AdminProductServlet',{
						imgsrc:$('#imgssrc').html(),
						order:12
						,pid:$('#pids').val()
					},function(res){
						if(res.result.success){
							layer.closeAll();
							layer.msg(res.result.message);
							table.reload("imgstable");
							$('#imgssrc').html("");
							$('#divimgs').html("");
							form.render();
						}else{
							layer.msg(res.result.message);
							$('#imgssrc').html("");
							$('#divimgs').html("");
							form.render();
						}
					},"json");
					  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});  
    		
    		    }
  	})
  
 active = {
    reload: function(){
      var pname = $('#pname');
      var iswheel = $('#iswheel');
      //执行重载
      table.reload('productReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
            pname: pname.val(),
            iswheel: iswheel.val(),
            order:1
        }
      }, 'data');
    }
  };
  
  $('#search').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>
 <body>
 <form class="layui-form" lay-filter="updateproform" action="" id="updateproform" style="display: none;">
			<input name="pid" style="display: none;"/>
			<div class="layui-form-item">
			    <label class="layui-form-label">商品名称</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pname" autocomplete="off" placeholder="请输入产品名称" class="layui-input">
			    </div>
			    <label class="layui-form-label">处理器名称</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pmaterial" placeholder="请输入处理器名称" autocomplete="off" class="layui-input">
			    </div>
			     <label class="layui-form-label">价格</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pmprice" lay-verify="required|number" placeholder="请输入价格" autocomplete="off" class="layui-input">
			    </div>
			   <!--  <label class="layui-form-label">发布时间</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pmodel" placeholder="请输入发布时间" autocomplete="off" class="layui-input">
			    </div> -->
			    <label class="layui-form-label">颜色</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pcolor" placeholder="请输入颜色" autocomplete="off" class="layui-input">
			    </div>
			    <label class="layui-form-label">产品详情</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pelement" placeholder="请输入产品详情" autocomplete="off" class="layui-input">
			    </div>
		    </div>
		    <div class="layui-form-item">
		   <label class="layui-form-label">产品类型</label>
			<div class="layui-input-inline" style="width:100px;">
				<select id="updateptid" name="ptid">
				</select>
			</div>
			  </div>
		    <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button type="submit" class="layui-btn" lay-submit="" lay-filter="updateprodoct">提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			</div>
		</form>	
 <form class="layui-form" action="" id="addproform" style="display: none;">
			<div class="layui-form-item">
			    <label class="layui-form-label">商品名称</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pname" autocomplete="off" placeholder="请输入产品名称" class="layui-input">
			    </div>
			    <label class="layui-form-label">处理器名称</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pmaterial" placeholder="请输入处理器名称" autocomplete="off" class="layui-input">
			    </div>
			     <label class="layui-form-label">价格</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pmprice"  lay-verify="required|number" placeholder="请输入价格" autocomplete="off" class="layui-input">
			    </div>
			    <!-- <label class="layui-form-label">发布时间</label>
			     <div class="layui-input-inline">
			      <input type="text" name="pmodel" placeholder="请输入发布时间" autocomplete="off" class="layui-input">
			    </div> -->
			    <label class="layui-form-label">颜色</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pcolor" placeholder="请输入颜色" autocomplete="off" class="layui-input">
			    </div>
			    <label class="layui-form-label">产品详情</label>
			    <div class="layui-input-inline">
			      <input type="text" name="pelement" placeholder="请输入产品详情" autocomplete="off" class="layui-input">
			    </div>
		    </div>
		    <div class="layui-form-item">
		   <label class="layui-form-label">产品类型</label>
			<div class="layui-input-inline" style="width:100px;">
				<select id="ptid" name="ptid">
				</select>
			</div>
			<label class="layui-form-lable">产品小图</label>
		   <div class="layui-upload layui-inline">
  			<button class="layui-btn" id="prosimg" type="button">上传图片</button>
    <img style="width:30px;height:30px" class="" id="simg">
    <input name="prosimg" id="inputsimg" style="display: none">
  </div>
			  </div>
		    <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button type="submit" class="layui-btn" lay-submit="" lay-filter="addprodoct">提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			</div>
		</form>	
 <div class="layui-form-item" style="margin-top: 10px; margin-left:10px">
		<form class="layui-form" method="post" onsubmit="return false;">
			<label class="layui-form-mid">商品名称:</label>
			<div class="layui-input-inline" style="width:100px;">
				<input type="text" id="pname" name="pname" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">是否轮播:</label>
			<div class="layui-input-inline" style="width:100px;">
				<select id="iswheel" name="iswheel">
					<option value="">请选择</option>
					<option value="true">是</option>
					<option value="false">否</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width:100px;">
				<button class="layui-btn" id="search" data-type="reload">搜索</button>
			</div>
			</from>
			</div>
 <table class="layui-hide" id="producttable" lay-filter="producttable"></table> 
 
 

 </form>
 
 
 
 <form lay-filter="imgsform" class="layui-form" id="imgsform" style="display: none;">
 <table class="layui-hide"   id="imgstable" lay-filter="imgstable"></table>
	<div style="display: none" id="imgssrc"></div>
		<input style="display: none" id="pids" name="pids"/>
		
			<div class="layui-upload">
			  <button class="layui-btn" id="uploadimgs" type="button">多图片上传</button> 
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    预览图：
			    <div class="layui-upload-list" id="divimgs"></div>
			 </blockquote>
			 <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button type="submit" class="layui-btn" lay-submit="" lay-filter="addproimgs">提交<tton>
			    </div>
		 </div>
			</div>
		
		
	</form>
  </body>
</html>
